<template>
    <el-main>
        <!-- 查询条件 -->
        <el-form
        :model="searchModel"
        ref="searchForm"
        label-width="80px"
        :inline="true"
        size="small"
        >
        <el-form-item>
        <el-input v-model="searchModel.name" placeholder="请输入标签名称"/>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh-right">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
        </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table
        :data="tagList"
        :height="tableHeight"
        border
        stripe
        style="width: 100%; margin-bottom: 10px"
        >
        <el-table-column
        prop="id"
        label="标签编号"
        width="100"
        align="center"
        ></el-table-column>
        <el-table-column prop="name" label="标签名称"  align="center"></el-table-column>
        <el-table-column prop="effect" label="标签主题"  align="center"></el-table-column>

        <el-table-column prop="type" label="标签类型"  align="center" >
            <template slot-scope="scope">
                <el-tag 
                :ref="'tagRef'+ scope.$index"
                :effect="scope.row.effect"
                :type="scope.row.type" 
                :size="scope.row.size"
                :color="scope.row.bgColor"
                :style="{'border-color': scope.row.borderColor, 'color':scope.row.color}"
                >
                {{scope.row.name}}
            </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="size" label="标签尺寸"  align="center">
            <template slot-scope="scope">
               <span v-if="scope.row.size == '' || scope.row.size  == undefined">默认大小</span>
               <span v-else >{{scope.row.size}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="bgColor" label="标签背景色"  align="center" >
            <template slot-scope="scope">
                <span v-if="scope.row.bgColor == '' || scope.row.bgColor  == undefined">主题颜色</span>
                <span v-else :style="{'color':scope.row.bgColor}">{{scope.row.bgColor}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="borderColor" label="标签边框色"  align="center" >
            <template slot-scope="scope">
                <span v-if="scope.row.borderColor == '' || scope.row.borderColor  == undefined">主题颜色</span>
                <span v-else :style="{'color':scope.row.borderColor}">{{scope.row.borderColor}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="color" label="字体色"  align="center" >
            <template slot-scope="scope">
                <span v-if="scope.row.color == '' || scope.row.color  == undefined">主题颜色</span>
                <span v-else :style="{'color':scope.row.color}">{{scope.row.color}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                <el-button
                icon="el-icon-edit"
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                >编辑
                </el-button
                >
                <el-button
                icon="el-icon-delete"
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
                >删除
                </el-button
                >
                </template>
        </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageNo"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    >
    </el-pagination>

     <!-- 添加和修改标签窗口 -->
    <system-dialog
    :title="tagDialog.title"
    :visible="tagDialog.visible"
    :width="tagDialog.width"
    :height="tagDialog.height"
    @onClose="onClose"
    @onConfirm="onConfirm"
    >
    <div slot="content">
    <el-form
    :model="tagObject"
    ref="tagForm"
    :rules="rules"
    label-width="80px"
    :inline="false"
    size="small"
    >
        <el-form-item label="标签名称" prop="name">
            <el-input v-model="tagObject.name"></el-input>
        </el-form-item>

        <el-form-item label="标签主题" prop="effect">
            <el-select v-model="tagObject.effect" placeholder="请选择">
                <el-option
                v-for="item in effectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="标签类型" prop="type">
            <el-select v-model="tagObject.type" placeholder="请选择">
                <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="标签大小" prop="size">
            <el-select v-model="tagObject.size" placeholder="请选择">
                <el-option
                v-for="item in sizeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="背景色" prop="color">
            <el-color-picker v-model="tagObject.bgColor" ></el-color-picker>
        </el-form-item>
        <el-form-item label="边框色" prop="color">
            <el-color-picker v-model="tagObject.borderColor" ></el-color-picker>
        </el-form-item>
        <el-form-item label="字体色" prop="color">
            <el-color-picker v-model="tagObject.color" ></el-color-picker>
        </el-form-item>
    </el-form>
    </div>
    </system-dialog>


</el-main>
</template>
<script>
//导入tag.js脚本
import tagApi from '@/api/picture/tag';
//导入对话框组件
import SystemDialog from '@/components/system/Systemdialog'


export default {
        name: 'tagList',
        //注册组件
        components:{
            SystemDialog
        },
        data() {
            return {
                //查询条件
                searchModel: {
                    name: '',
                    pageNo: 1, //当前页码
                    pageSize: 10, //每页显示数量
                    userId:this.$store.getters.userId, //用户ID
                },
                tagList: [], //数据列表
                tableHeight: 0, //表格高度
                pageNo: 1, //当前页码
                pageSize: 10, //每页显示数量
                total: 0, //总数量
                rules: {
                        name: [{ required: true, trigger: 'blur', message: '请输入标签名称' }],
                        effect: [{ required: true, trigger: 'blur', message: '请输入标签类型' }],
                        },
                //添加和修改标签窗口属性
                tagDialog: {
                    title: '',
                    visible: false,
                    height: 390,
                    width: 500
                },
                //tag对象
                tagObject: {
                    id: "",
                    name: "",
                    effect:"",
                    type: "",
                    size: "",
                    bgColor: "",
                    borderColor:"",
                    color:"",
                    belongs: this.$store.getters.userId //会被清除
                },
                effectOptions: [
                    { value: 'dark', label: '黑暗'},
                    { value: 'light', label: '光明'},
                    { value: 'plain', label: '计划'},
                ],
                typeOptions: [
                    { value: '', label: '浅蓝'},
                    { value: 'success', label: '浅绿'},
                    { value: 'info', label: '浅灰'},
                    { value: 'warning', label: '浅橙'},
                    { value: 'danger', label: '浅红'},
                ],
                sizeOptions: [
                    { value: 'medium', label: '超大杯'},
                    { value: 'small', label: '大杯'},
                    { value: 'mini', label: '中杯'},
                ],
                color : '#409EFF',
            }
        },
        methods: {
          
            /**
            * 打开添加窗口
            */
            openAddWindow(index) {
                //清空表单数据
                this.$resetForm("tagForm",this.tagObject);
                this.tagDialog.title = '新增标签'//设置窗口标题
                this.tagDialog.visible = true//显示窗口
                this.tagObject.belongs = this.$store.getters.userId //当前登录用户id
          
            },
            /**
            * 窗口取消事件
            */
            onClose() {
     
                this.tagDialog.visible = false
            },
            /**
            * 窗口确认事件
            */
            onConfirm() {
              
                //表单验证
                this.$refs.tagForm.validate(async (valid)=>{
                if(valid){
                    let res = null;
                    //判断标签ID是否为空
                    if (this.tagObject.id === "") {
                        //新增
                        //发送添加请求 
                        res = await tagApi.addTagApi(this.tagObject);
                    } else {
                        //发送修改请求
                        res = await tagApi.updateTagApi(this.tagObject);
                    }
                    //判断是否成功
                    if (res.success) {
                        this.$message.success(res.message);
                        //刷新
                        this.search(this.pageNo,this.pageSize);
                        //关闭窗口
                        this.tagDialog.visible = false;
                    } else {
                        this.$message.error(res.message);
                    }
                }
                });

            },
            /**
            * 查询
            */
           async search() {
                this.searchModel.pageNo = this.pageNo;//当前页码
                this.searchModel.pageSize = this.pageSize;//每页显示数量
                //发送查询请求
                let res = await tagApi.getTagListApi(this.searchModel);
                //执行成功
                if (res.success) {
                //标签列表
                this.tagList = res.data.records;
                //总数量
                this.total = res.data.total;
                }

            },
            /**
            * 重置查询条件
            */
            resetValue() {
            },
            /**
            * 当每页数量发生变化时触发该事件
            */
            handleSizeChange(size) {
                this.pageSize = size ;
                this.search();
            },
            /**
            * 当页码发生变化时触发该事件
            */
            handleCurrentChange(page) {
                this.pageNo = page ;
                this.search();
            },
            /**
            * 打开编辑窗口
            */
            handleEdit(row) {
                //数据回显
                this.$objCopy(row, this.tagObject); //将当前编辑的数据复制到tag对象中
                //设置窗口标题
                this.tagDialog.title = "编辑标签";
                //显示编辑标签窗口
                this.tagDialog.visible = true;
            },
            /**
            * 删除
            */
           async handleDelete(row) {
            let res = await tagApi.deleteTagApi({id:row.id}); 
            if(res.success){
                this.$message.success(res.message);
                //刷新
                this.search();
            }else{
                this.$message.error(res.message);
            }
         },
           
        },
        //初始化时调用
        created() {
           this.search();
        },
        //挂载后调用
        mounted() {
            this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 220
            })

          
        }
}
</script>   


<style scoped>
.editCity {
  color: #fff;
  background-color: rgba(20, 227, 179, 0.904);
  border-color: rgba(20, 227, 179, 0.904);
}
.editCity:hover,
.editCity:focus {
  background: var(--el-button-hover-color);
  border-color: var(--el-button-hover-color);
  color: var(--el-button-font-color);
}

.editPermssion {
  color: #fff;
  background-color: rgba(240, 28, 134, 0.904);
  border-color: rgba(240, 28, 134, 0.904);
}
.editPermssion:hover,
.editPermssion:focus {
  background: var(--el-button-hover-color);
  border-color: var(--el-button-hover-color);
  color: var(--el-button-font-color);
}

</style>